<template>
  <div class="container">
    <van-row type="flex" justify="space-around" align="center">
      <van-col>
        <van-dropdown-menu>
          <van-dropdown-item :title="address" class="select_area" ref="area_item">
            <van-area
              columns-num="2"
              :area-list="areaList"
              @confirm="addConfirm"
              @cancel="hideAreaItem"
              :value="area_code"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-col>
      <div style="height:17px;background:#F0F1F4;margin:0px 6px;"></div>
      <van-col style="width:100%;">
        <van-search
          v-model="filter_name"
          placeholder="查找服务网点"
          clearable
          shape="round"
          @search="initData"
        ></van-search>
      </van-col>
    </van-row>

    <van-list v-model="loading" :finished="true" finished-text="没有更多了">
      <div v-if="isEmpty" style="text-align:center">
        <img src="@/assets/images/404.png" height="300px" />
        <div>
          <van-row
            type="flex"
            justify="space-around"
            style="height:41px;background:#ee3f00;color:white;margin:10px 16px 6px 16px;"
            align="center"
          >
            <van-col @click="beFranchisee">
              <span>我要成为加盟商</span>
            </van-col>
            <van-col>
              <div style="height:24px;color:#fff;border-left: 1px solid;"></div>
            </van-col>
            <van-col @click="consult">网点咨询加盟</van-col>
          </van-row>
        </div>
      </div>
      <div v-else>
        <div v-for="item in listCode" :key="item.id" :title="item" style="padding:14px 0">
          <van-row type="flex" @click="shopDetail(item.id)">
            <van-col>
              <div style="width:100px;padding-bottom:100px;background-size:100% 100%;" :style="{backgroundImage:`url(${getSrc(item)})`}"></div>
            </van-col>
            <van-col style="margin-left:10px;width:100%;">
              <div
                style="display:flex;flex-direction:column;justify-content:space-between;height:100px;"
              >
                <div>
                  <span style="color:#101010">{{item.serveName}}</span>
                  <br />
                  <span
                    style="color:#95969F;font-size:12px;"
                  >{{item.province + item.city + item.county + item.addressDetail}}</span>
                </div>
                <div>
                  <van-row type="flex" justify="space-between" align="bottom">
                    <van-col>
                      <span style="color:#95969F;font-size:12px;">营业时间：08：00-17：00</span>
                      <div style="height:17px; line-height:17px;margin-top:5px;">
                        <van-icon name="phone-o" color="#EE3F00"></van-icon>
                        <span style="margin-left:5px;font-size:12px;">{{item.tel}}</span>
                      </div>
                    </van-col>
                    <van-col>
                      <div
                        style="display:flex;flex-direction:column;align-items: center;justify-content: end;"
                      >
                        <div>
                          <van-icon name="location-o" size="12px"></van-icon>
                        </div>
                        <div
                          style="font-size:12px;margin-top:5px;float:right"
                        >{{(item.distance / 1000).toFixed(1)}}km</div>
                      </div>
                    </van-col>
                  </van-row>
                </div>
              </div>
            </van-col>
          </van-row>
        </div>
        <van-divider :style="{ height: '1px', padding: '0 16px' }" />
        <div>
          <van-row type="flex" justify="space-around"
                   style="height:41px;background:#ee3f00;color:white;margin:10px 16px 6px 16px;" align="center">
            <van-col @click="beFranchisee">
              <span>我要成为加盟商</span>
            </van-col>
            <van-col>
              <div style="height:24px;color:#fff;border-left: 1px solid;"></div>
            </van-col>
            <van-col @click="consult">网点咨询加盟</van-col>
          </van-row>
        </div>
      </div>

      <div style="height:12px;background:#F0F1F4"></div>
      <div style="display: flex;align-items: center;flex-direction: column;">
        <div style="padding:5px 0px;">
          <span>附近网点</span>
        </div>
        <div style="height:1px;background:#F73F49;width:150px;"></div>
      </div>
      <div v-for="item in listNoCode" :key="item.id" :title="item" style="padding:14px 0;">
        <van-row type="flex" @click="shopDetail(item.id)">
          <van-col>
            <div style="width:100px;padding-bottom:100px;background-size:100% 100%;" :style="{backgroundImage:`url(${getSrc(item)})`}"></div>
          </van-col>
          <van-col style="margin-left:10px;width:100%;">
            <div
              style="display:flex;flex-direction:column;justify-content:space-between;height:100px;"
            >
              <div>
                <span style="color:#101010">{{item.serveName}}</span>
                <br />
                <span
                  style="color:#95969F;font-size:12px;"
                >{{item.province + item.city + item.county + item.addressDetail}}</span>
              </div>
              <div>
                <van-row type="flex" justify="space-between" align="bottom">
                  <van-col>
                    <span style="color:#95969F;font-size:12px;">营业时间：08：00-17：00</span>
                    <div style="height:17px; line-height:17px;margin-top:5px;">
                      <van-icon name="phone-o" color="#EE3F00"></van-icon>
                      <span style="margin-left:5px;font-size:12px;">{{item.tel}}</span>
                    </div>
                  </van-col>
                  <van-col>
                    <div
                      style="display:flex;flex-direction:column;align-items: center;justify-content: end;"
                    >
                      <div>
                        <van-icon name="location-o" size="12px"></van-icon>
                      </div>
                      <div
                        style="font-size:12px;margin-top:5px;float:right"
                      >{{(item.distance / 1000).toFixed(1)}}km</div>
                    </div>
                  </van-col>
                </van-row>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </van-list>
    <baidu-map @ready="handler" ak="2h9wN9GgNpKzrBPmvXFdBtApasaB5cmx"></baidu-map>
  </div>
</template>

<script>
import {
  Search,
  Row,
  Col,
  DropdownMenu,
  DropdownItem,
  List,
  Uploader,
  Popup,
  Area,
  Divider
} from 'vant';
import {
  updateRentStatus,
  deleteRentRecord,
  dicItems,
  listShops,
  getCodeByDistrict
} from '@/api/api';
import areaList from '@/views/user/module-address-edit/area_all.json';
import logo_default from '@/assets/images/logo.jpg';
import error_img from '@/assets/images/404.png';
//import { getLocalStorage } from '@/utils/local-storage';

import BaiduMap from 'vue-baidu-map/components/map/Map.vue';

export default {
  data() {
    return {
      isEmpty: false,
      loading: false,
      finished: false,
      lat: 33.946,
      lng: 118.353,
      areaList: areaList,
      address: '全国地区',
      listCode: [],
      listNoCode: [],
      logo_default: logo_default,
      error_img: error_img,
      filter_name: '',
      area_code: ''
    };
  },

  created() {
    this.initArea();
    this.initData();
  },

  methods: {
    initArea() {
      let area = this.$store.getters.getArea;
      if (area.code != null) {
        this.area_code = area.code;
        this.address = area.city;
      }
    },
    handler({ BMap, map }) {
      var geolocation = new BMap.Geolocation();
      let _this = this; // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
      geolocation.getCurrentPosition(
        function(r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            _this.lat = r.point.lat;
            _this.lng = r.point.lng;
            _this.initData();
          } else {
            alert('failed' + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    },
    shopDetail: function(itemId) {
      this.$router.push({
        path: '/store/service-detail',
        query: { id: itemId, lat: this.lat, lng: this.lng }
      });
    },
    beFranchisee() {
      this.$router.push('/store/apply');
    },
    consult() {
      window.location.href = 'tel:17314248188';
    },
    getSrc(item) {
      let image = logo_default;
      if (item != null && item.logo != null) {
        image = item.logo;
      }
      return image;
    },
    addConfirm(e) {
      if (e[0].code == '100000') {
        this.area_code = '';
        this.address = '全国地区';
      } else {
        this.area_code = e[1].code;
        this.address = e[1].name;
      }
      this.changeItem();
      this.$refs.area_item.toggle();
    },
    hideAreaItem() {
      this.$refs.area_item.toggle();
    },
    changeItem() {
      this.listCode = [];
      this.listNoCode = [];
      this.initData();
    },

    initData() {
      //console.log("initdata");
      this.listNoCode = [];
      this.listCode = [];
      listShops({
        lat: this.lat,
        lng: this.lng,
        filtername: this.filter_name,
        areaCode: this.area_code
      })
        .then(res => {
          //this.list.push(...res.data.data.list);
          //console.log(JSON.stringify(res.data.data.noCode))
          this.listNoCode = res.data.data.noCode;
          this.listCode = res.data.data.code;
          this.loading = false;
          if (this.listCode.length == 0){
            this.isEmpty = true;
          } else {
            this.isEmpty = false;
          }
        })
        .catch(e => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    }
  },
  components: {
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  }
};
</script>

<style lang="scss" scoped>
/* .van-search{
  background: rgb(255, 255, 255);
    margin-bottom: -10px;
} */
/deep/ .van-icon{
  vertical-align: middle;
}

/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  color: #ee3f00;
}
.select_area /deep/ .van-picker__toolbar {
  width: 100%;
  position: absolute;
  bottom: -44px;
}
.select_area /deep/ .van-picker__columns {
  margin-bottom: 44px;
}
.van-cell >>> .van-field__control[type='search'] {
  height: 30px;
}
.corner-span {
  width: 40px;
  height: 20px;
  // background-color: #EE3F00;
  border: 1px solid #ee3f00;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 8px;
}
.active {
  visibility: hidden;
}
.spanafter {
  position: relative;
  padding: 0 8px;
  line-height: 18px;
}
.spanafter::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}
.address {
  text-align: center;
  height: 36px;
  line-height: 36px;
  color: #323233;
  font-size: 15px;
}

.container {
  background-color: white;
  .van-row {
    padding: 0px 16px;
    .van-row {
      padding: 0px;
    }
  }
}

.van-divider {
  margin: 0px;
  padding-top: 15px;
}

.van-search {
  padding: 0px;
}

.title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: -4px;
}

.publish {
  line-height: 40px;
  width: 54px;
  text-align: end;
}

.publish span {
  width: 60px;
  height: 30px;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 10px;
  font-size: 13px;
  padding: 5px 6px;
  color: white;
}

.van-cell {
  padding: 0px;
}

.cell-span {
  color: #969799;
  font-size: 12px;
}
</style>